<template>
	<view class="college">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="topic-swiper">
			<block v-for="(item,index) in jddata.carousel" :key="index" @click="navToRuter(items.route)">
				<swiper-item>
					<image :src="item.path" mode="widthFix" lazy-load></image>
				</swiper-item>
			</block>
		</swiper>
		
		
		<!--推荐课程-->
		<view class="college-menu college-menu-tuijian">
			<view class="college-title">
				<view class="college-title-left college-title-tuijian-left">
					<view>推荐课程</view>
					<view>让你快速了解花钱更赚钱的玩法</view>
				</view>
				<view class="college-title-right">
					<text>查看更多</text>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="20">
				<view class="scroll-view-item_H" v-for="(items,index) in indexlist.command" :key="index" @click="college_click(items)">
					<view class="view-item-menu">
						<image :src="items.cover" mode="widthFix" lazy-load></image>
						<text>{{items.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		
		
		
		<!--新手课堂-->
		<block v-for="(items,index) in indexlist.list" :key="index" @click="college_click(items)">
		<view class="college-menu college-new-xinshou" v-if="index%2==0">
			<view class="college-title">
				<view class="college-title-left">
					<view>{{items.name}}</view>
					<view>{{items.short_name}}</view>
				</view>
				<view class="college-title-right college-title-right-xinshou">
					<text>查看更多</text>
				</view>
			</view>
			<view class="college-xinshou-items-list">
				<view class="college-xinshou-list" v-for="(items_child,index_child) in items.carousel" @click="college_click(items_child)">
					<view class="college-item-left">
						<image :src="items_child.cover" mode="widthFix" lazy-load></image>
					</view>
					<view class="college-item-right">
						<view>{{items_child.title}}</view>
						<view><text>{{items_child.studycount}}</text><text>{{items_child.sharecount}}万分享</text></view>
					</view>
				</view>
			</view>
		</view>
		
		<!--进阶课堂-->
		<view class="college-menu college-new-xinshou" v-else>
			<view class="college-title">
				<view class="college-title-left">
					<view>{{items.name}}</view>
					<view>{{items.short_name}}</view>
				</view>
				<view class="college-title-right college-title-right-xinshou">
					<text>查看更多</text>
				</view>
			</view>
			<view class="college-jinjie-items-list">
				<view class="college-jinjie-list" v-for="(items_child,index_child) in items.carousel"  @click="college_click(items_child)">
					<view class="college-jinjie-item-left">
						<image  :src="items_child.cover" mode="widthFix" lazy-load></image>
						<view>待解锁</view>
					</view>
					<view class="college-jinjie-item-right">
						<view>{{items_child.title}}</view>
						<view><text>{{items_child.studycount}}</text><text>{{items_child.sharecount}}万分享</text></view>
					</view>
				</view>				
			</view>
		</view>
		</block>
		
		
	</view>
</template>

<script>
	import tools from "../../common/tools"
	import apicollege from '../../common/api/college';
	export default {
		data() {
			return {
				swiper:[
					{src:"/static/buygou_bg.jpg"},
					{src:"/static/buygou_bg.jpg"},
					{src:"/static/buygou_bg.jpg"}
				],
				indexlist:[],
				jddata:[],
				//菜单滑动
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				
			}
		},
		onShow(){
			tools.is_has_login('hasLogin')
			this.homejd();
			this.collegelist();
		},
		onLoad() {
			
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			
			//商学院列表
			collegelist(){
				apicollege.collegelist({}).then(res =>{
					this.indexlist=res.data;
				}).catch(cateres =>{
					
				});
			},
			
			//课程点击
			college_click(items){
				uni.navigateTo({
					url: `college_detail?data=${JSON.stringify(items)}`
				})
			},
			
			//商学院列表
			homejd(){
				apicollege.homejd({type:'college'}).then(res =>{
					this.jddata=res.data;
				}).catch(cateres =>{
					
				});
			},
			
			navToRuter(route){
				tools.router(route);
			},
		},
		
		components:{
			apicollege,
		},
	}
</script>

<style scoped>
	.college{
		width:94%;
		padding:3% 3%;
		background:#F5F5F5;
	}
	uni-image{
		width:100%;
	}
	
	
	/*新手教程*/
	.college-menu{
		width:100%;
		border-radius:15upx;
		margin: 10upx auto;
	}
	 .college-menu-tuijian{
		background-image: linear-gradient(#f2e4c9,#fef8ec);
	 }
	.college-title{
		width:100%;
		display:flex;
		flex-direction: row;
	}
	.college-title-left{
		width:71%;
		padding:0 2%;
		margin-bottom:20upx;
	}
	.college-title-right{
		width:25%;
		padding-top:30upx;
	}
	.college-title-right>text{
		background:#FFFFFF;
		padding:10upx 25upx;
		border-radius:20upx;
		font-size:20upx;
	}
	.college-title-right-xinshou>text{
		background:#FFC0CB;
		color:#FFFFFF;
	}
	.college-title-tuijian-left>view{
		color:#8c7354;
	}
	.college-title-left>view:first-child{
		font-size:30upx;
		font-weight:bold;
	}
	.college-title-left>view:last-child{
		font-size:20upx;
	}
	.scroll-view_H{
		width: 99%;
		flex-direction: row;
		white-space: nowrap;
	}
	.scroll-view-item_H{
		width: 40%;
		display: inline-block;
		flex-wrap: nowrap;
	}
	.view-item-menu{
		display: block;
		text-align:center;
		line-height:40px;
	}
	.view-item-menu>image{
		margin:0 auto;
		width:95%;
		display: block;
		border-radius:10upx;
	}
	.view-item-menu text{
		display:block;
	}
	.home-list-item{
		width: 750upx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.college-new-xinshou{
		background:#fff;
	}
	.college-xinshou-items-list{
		width:99%;
		margin:0 auto;
	}
	.college-xinshou-list{
		width:100%;
		margin-bottom:10upx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
	}
	.college-xinshou-list .college-item-left{
		width:38%;
		padding:1%;
	}
	.college-item-left>image{
		height:200upx;
		width:100%;
		border-radius:20upx;
	}
	.college-xinshou-list .college-item-right{
		width:58%;
		padding:1%;
	}
	.college-item-right>view:first-child{
		width:100%;
		font-weight:bold;
		word-break: keep-all;
		word-wrap: break-word;
		white-space: pre-line;
		line-height:35upx;
		font-size:28upx;
	}
	.college-item-right>view:last-child{
		font-size:20upx;
		margin-top:60upx;
	}
	.college-item-right>view:last-child>text{
		font-size:20upx;
		margin-right:20upx;
		color:#ccc;
	}
	.college-jinjie-items-list{
		width:96%;
		padding:0 2%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
	}
	.college-jinjie-list{
		width:49%;
	}
	.college-jinjie-items-list .college-jinjie-list:nth-child(even){
		padding-left: 2%;
	}
	.college-jinjie-item-left{
		width:100%;
	}
	.college-jinjie-item-left>image{
		width:100%;
		height:300upx;
	}
	.college-jinjie-item-left>view{
		height:50upx;
		line-height:50upx;
		width:100%;
		background-color:#fdb93a;
		position:relative;
		top:-20upx;
		text-align:center;
		color:#fff;
	}
	.college-jinjie-item-right>view:first-child{
		font-weight:bold;
		word-break: keep-all;
		word-wrap: break-word;
		white-space: pre-line;
	}
	.college-jinjie-item-right>view:last-child{
		color:#CCCCCC;
	}
	
	
	
</style>
